
        
        .shave{
            position: fixed;
            width:100%;
            height: 100%;
            background: rgb(250,250,250);
            top:0px;

        }
        body>.container{
            position: relative;
            z-index: 2;
        }
        main{
            position: relative;
            padding-top: 60px;
        }
        main .flip{
            background:#000;
            flex-direction: column;
            height: calc(100vh - 60px);
        }
        main .flip .swiper{
            flex: 1;
        }
        main .flip .swiper .contn{
            position: relative;
            height: 100%;
            z-index: 1;
        }
        main .flip .swiper .swiper-container{
            height: 100%;
        }
        main .flip .swiper .swiper-slide{
            overflow: hidden;
            height: 100%;
        }
        main .flip .swiper .swiper-button-prev,
        main .flip .swiper .swiper-button-next{
            background-image: initial;
            width:50px;
            height: 50px;
            background-size: contain;
            background-position: center center;
            -webkit-tap-highlight-color:transparent;
            outline: none;
        }
        main .flip .swiper .header-prev{
            background-image: url(../../img/example/headerPrev.png);
            left: 20px;
        }
        main .flip .swiper .header-next{
            background-image: url(../../img/example/headerNext.png);
            right: 20px;
        }
        main .flip .swiper img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
            max-width:100%;
            max-height: 100%;
        }
        main .flip .objects{
            background: #000;
            padding-top: 30px;
            padding-bottom: 45px;
            color: #fff;
        }
        main .flip .objects .fluid{
            justify-content: flex-end;
            flex-wrap: wrap;
        }
        
        main .flip .objects .box{
            width: 100%;
        }
        main .flip .objects .box .empNum{
            font-weight: bold;
            font-size: 24px;
            padding-right: 100px;
        }
        main .flip .objects .box .details{
            flex: 1;
        }
        main .flip .objects .box .details .info{
            justify-content: space-between;
            margin-bottom: 20px;
        }
        main .flip .objects .box .details span{
            font-size: 18px;
        }
        main .flip .objects .box .details .txt span{
            line-height: calc(14px * 1.5);
        }
        main .flip .objects .box .details .txt div{
            flex: 1;
        }
        main .flip .objects .box .details .txt div p{
            line-height: 150%;
            font-size: 14px;
        }
        main .flip .objects .back{
            height: 45px;
            width: 135px;
            font-size: 16px;
            font-weight: bold;
            border: 2px solid #fff;
            transition: border-color ease .3s;
            color: #fff;
            position: relative;
            z-index: 1;
            margin-top: 30px;
        }
        main .flip .objects .back .bg{
            background: #543a00;
            position: absolute;
            width: 0%;
            height: 100%;
            top: 0px;
            left: 0px;
            transition: width ease .3s;
            z-index: -1;
        }
        main .flip .objects .back:hover{
            border-color: #543a00;
        }
        main .flip .objects .back:hover .bg{
            width: 100%;
        }
      
        .mobileDevice main .flip .swiper{
            height: initial;
        }
        .mobileDevice main .flip .swiper img{
            width: 100%;
            height: auto;
            position: initial;
            transform:initial;
        }
        .mobileDevice main .flip .swiper .swiper-wrapper{
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -moz-box-pack:center;
            -webkit-align-items: center;
            align-items: center;
        }
        
       @media (max-width:1200px){
            main .flip{
                display: block;
                height: initial;
            }
            main .flip .swiper{
                height: 100vh;
            }
           main .flip .objects{
               position: initial;
           }
           main .flip .objects .fluid{
               justify-content: initial;
               align-items: flex-end;
           }
           main .flip .objects .fluid,
           main .flip .objects .box .details .info{
               flex-direction: column;
           }
           main .flip .objects .box .details .info{
               margin-top: 30px;
               margin-bottom: 0px;
           }
           main .flip .objects .box .details .info span + span{
               margin-top: 10px;
           }
       }
       @media (max-width:768px){
            main .flip .swiper .swiper-button-prev, 
            main .flip .swiper .swiper-button-next{
                width: 30px;
                height: 30px;
            }
       }
       @media (max-width:767px){
           main .flip .objects{
               padding-top: 25px;
               padding-bottom: 30px;
           }
           main .flip .objects .box .empNum{
               font-size: 20px;
           }
           main .flip .objects .box .details span{
                font-size: 16px;
            }
            main .flip .objects .box .details .info span + span{
                margin-top: 5px;
            }
            main .flip .objects .box .details .txt span{
                line-height: calc(12px * 1.5);
            }
            main .flip .objects .box .details .txt p{
                font-size: 12px;
            }
       }